import { debounce } from '@/utils'

export default{
    data(){
        return{
            $_sidebarElm:null,
            $_resizeHandler:null,
        }
    },
    mounted () {
        this.$_resizeHandler=debounce(()=>{
          if(this.chart){
            this.chart.resize();
         }
        },0);
        this.$_initResizeEvent()
        this.$_initSidebarResizeEvent()
    },
    beforeDestroy() {
        this.$_destroyResizeEvent()
        this.$_destroySidebarResizeEvent()
      },
      // to fixed bug when cached by keep-alive
      // https://github.com/PanJiaChen/vue-element-admin/issues/2116
      activated() {
        this.$_initResizeEvent()
        this.$_initSidebarResizeEvent()
      },
      deactivated() { 
        this.$_destroyResizeEvent()
        this.$_destroySidebarResizeEvent()
      },
      methods: {
        // use $_ for mixins properties
        // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
        $_initResizeEvent() {
            this.$_resizeHandler();
            window.addEventListener('resize', this.$_resizeHandler)
        },
        $_destroyResizeEvent() {
            window.removeEventListener('resize', this.$_resizeHandler)
        },
        $_sidebarResizeHandler(e) {
          // console.log(e)
          if (e.propertyName === 'width') {
            this.$_resizeHandler()
          }
        },
        $_initSidebarResizeEvent() {
          this.$_sidebarElm = document.getElementsByClassName('el-main')[0];
          // 创建一个ResizeObserver实例并定义回调函数
          const resizeObserver = new ResizeObserver(() => {
            this.$_resizeHandler();
          });
          resizeObserver.observe(this.$_sidebarElm);
          this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
        },
        $_destroySidebarResizeEvent() {
          this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
        }
      }
}